<template>
  <div class="promotion">
    <!-- 查询 -->
    <el-card shadow="never">
      <el-form label-width="80px" :inline="true" ref="formPromotion" :model="formPromotion">
        <el-form-item label="申请人">
          <el-input v-model="formPromotion.username" size="mini"></el-input>
        </el-form-item>

        <el-form-item label="申请状态">
          <el-select v-model="formPromotion.applicationResult" placeholder="请选择" size="mini">
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit" size="mini">查询</el-button>
        </el-form-item>

      </el-form>
    </el-card>
    <!-- 表格 -->
    <el-card shadow="never" style="margin-top: 20px;">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="creationTime" label="申请时间" width="150">
        </el-table-column>
        <el-table-column prop="username" label="申请人">
        </el-table-column>
        <el-table-column prop="emails" label="邮箱" width="180">
        </el-table-column>
        <el-table-column prop="website" label="网站" width="150">
        </el-table-column>
        <el-table-column prop="instagramHandle" label="Instagram 手柄" width="150">
        </el-table-column>
        <el-table-column prop="twitterHandle" label="Twitter 手柄" width="150">
        </el-table-column>
        <!-- <el-table-column prop="applicationResult" label="操作状态">
          <template v-slot="{ row }">
            <span v-if="row.applicationResult === 1">未处理</span>
            <span v-if="row.applicationResult === 2">同意</span>
            <span v-if="row.applicationResult === 3">驳回</span>
          </template>
</el-table-column> -->
        <el-table-column prop="description" label="推广品牌描述" width="300">
        </el-table-column>

        <el-table-column prop="disposePeople" label="操作人">
        </el-table-column>
        <el-table-column prop="updateTime" label="操作时间" width="150" />
        <el-table-column prop="remark" label="备注">
        </el-table-column>

        <el-table-column prop="" label="操作">
          <template v-slot="{ row }">
            <el-button type="text" size="mini" @click="editBtn(row)"
              v-if="row.applicationResult === 0 || row.applicationResult === 1">未处理</el-button>
            <span v-if="row.applicationResult === 2">同意</span>
            <span v-if="row.applicationResult === 3">驳回</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <paging :page-size="formPromotion.pageSize" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />

      <!-- 点击编辑的弹窗 -->
      <el-dialog title="编辑" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <!-- form -->
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">

          <el-form-item prop="applicationResult" label="状态">
            <el-select v-model="form.applicationResult" size="mini">
              <el-option v-for="item in optionsChange" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" size="mini" />
          </el-form-item>
          <el-form-item>
            <el-row type="flex" justify="end" style="margin-top: 10px;">
              <el-button size="mini" @click="handleClose">取 消</el-button>
              <el-button size="mini" type="primary" @click="btnOK">保存</el-button>
            </el-row>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getPromotionList, updateTbPromotion } from '@/api/promotion'
import paging from '@/components/paging.vue'
import Cookies from "js-cookie";
import { TOKEN_KEY } from "@/constants/KEY";
import { options } from 'runjs';
// import ChangeResult from './components/ChangeResult.vue'
// import { getPromotion } from '@/api/Tradingacct'

export default {
  name: 'VueAdminIndex',
  data() {
    return {
      header: {
        Authentication: Cookies.get(TOKEN_KEY)
      },
      formPromotion: {
        creationTime: null,
        username: null,
        applicationResult: null,
        emails: null,
        remark: null,
        description: null,
        page: 1,
        pageSize: 10,
      },
      total: 0,
      tableData: [],
      options: [
        { id: null, name: '全部' },
        { id: 1, name: '未处理' },
        { id: 2, name: '同意' },
        { id: 3, name: '驳回' },
      ],
      dialogVisible: false,
      form: {
        applicationResult: null,
        remark: null
      },
      optionsChange: [
        { id: 2, name: '同意' },
        { id: 3, name: '驳回' },
      ],
      rules: {
        applicationResult: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        // remark: [
        //   { required: true, message: '请输入备注', trigger: 'blur' }
        // ]
      },
      id: 0
    }
  },
  components: {
    paging
  },
  mounted() {
    this.getPromotion()
  },
  methods: {
    // 列表接口
    async getPromotion() {
      const data = await getPromotionList(this.formPromotion)
      console.log(data, '11')
      this.tableData = data.records
      this.total = data.total
    },

    // 点击查询
    onSubmit() {
      clearTimeout(this.timer) // 清理上一次的定时器
      this.timer = setTimeout(() => {
        this.formPromotion.page = 1
        this.getPromotion()
      }, 100)
    },

    // 点击编辑
    async editBtn(row) {
      this.dialogVisible = true
      console.log(row.id)
      this.id = row.id
    },

    // 点击修改的确定
    async btnOK() {
      await this.$refs.form.validate()
      const res = await updateTbPromotion({
        id: this.id,
        applicationResult: this.form.applicationResult,
        remark: this.form.remark
      })
      this.dialogVisible = false
      this.$message({
        message: res.paymentResult,
        type: 'success'
      });
      this.$refs.form.resetFields()
      this.getPromotion()
    },
    handleSizeChange(val){
      this.formPromotion.pageSize = val
      this.getPromotion()
    },
    handleCurrentChange(val){
      this.formPromotion.page = val
      this.getPromotion()
    },

    // 点击取消
    handleClose() {
      this.dialogVisible = false
      this.$refs.form.resetFields()
    }
  },


}
</script>

<style lang="scss" scoped>
@media (max-width:768px) {

  .el-form-item {
    display: flex;


  }
}
</style>